<template>
  <div>
    <h2>student姓名：{{name}}</h2>
    <h2>student年龄：{{age}}</h2>
    <h2>student性别：{{gender}}</h2>
    <button @click="showInfo()">显示student信息</button><br/>
    <button @click="selectAll()">axios获得所有学生列表</button>
  </div>
</template>
  
<script>
  import axios from 'axios'

  export default {
    name: 'Student',
    props: ['name', 'age'],//子组件通过props接受父组件传递过来的数据
    data() {
      return {
        gender: '男'  
      }
    },
    methods: {
      showInfo() {
        alert(this.name + " : " + this.age);
      },
      selectAll() {
        axios.get('/api/students').then((response => {
          console.log(response);
          console.log(response.data);//JSONResult
        }));
      }
    },
    mounted() {
      //this.$bus.$on监听事件
      //第一个参数代表：监听事件的名字
      //第二个参数代表：事件被触发之后要执行的代码，对应一个函数
      this.$bus.$on('updateBanjiName', (data) => {
        console.log('我是Student组件，我接收到了Banji组件发送过来的班级名字： ' + data);
        alert('我是Student组件，我接收到了Banji组件发送过来的班级名字： ' + data);
      });
    },
  }
</script>
 
<style scoped>
     
</style>